<template>
	<div id="loading" v-if="loading">
		<div class="zt-loading">
			<div class="loading"></div>
			<div class="text">{{ text }}</div>
		</div>
		<div class="popContainer" v-if="loading"></div>
	</div>
</template>

<script>
export default {
	props: {
		text: { type: String },
		loading: { type: Boolean },
	},
}
</script>

<style lang="less" scoped>
.zt-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	z-index: 999999998;
	width: 100%;
	.loading {
		position: relative;
		width: 30px;
		height: 30px;
		border: 2px solid #000;
		border-top-color: rgba(0, 0, 0, 0.2);
		border-right-color: rgba(0, 0, 0, 0.2);
		border-bottom-color: rgba(0, 0, 0, 0.2);
		border-radius: 100%;
		left: 49%;
		top: 0;
		transform: translateX(-53%);
		animation: circle infinite 0.75s linear;
	}
	.text {
		padding: 10px 0;
	}
}
.popContainer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(51, 51, 51, 0.3);
	z-index: 99999997;
}
@keyframes circle {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
